<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<!-- setup 语法糖 -->
<script lang="ts" setup name="person234">
    // 数据 原来是写在data中的，此时的 name、age、tel 都不是响应式的数据
    let name = '张三'
    let age = 18
    let tel = '52063'

    // 方法
    function changeName() {
      name = 'zhang-san' // 注意：这样改name,页面是没有变化的
      console.log(name); // name值确实改了，但是name不是响应式的
      
    }
    function changeAge() {
      age += 1 // 注意：这样改age,页面是没有变化的
      console.log(age); // age值确实改了，但是name不是响应式的
      
    }
    function showTel() {
      alert(tel)

    }

</script>

<style scoped>

    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>